<template>
  <el-card>
      <el-button @click="$router.push('/specs/add')" type="primary" icon="el-icon-circle-plus-outline">新增</el-button>
      <el-divider></el-divider>
      <el-table
      :data="list"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        min-width="80">
      </el-table-column>
      <el-table-column
        prop="specsname"
        label="规格名称"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="attrs"
        label="可选值"
        min-width="180">
        <template v-slot="scope">
            <el-tag type="success" v-for="(item,index) in scope.row.attrs" :key="index">{{item}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        min-width="180"
        >
        <template v-slot="scope">
            <el-tag type="success" v-if="scope.row.status==1">正常</el-tag>
            <el-tag type="error" v-else>禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        min-width="180"
        >
        <template v-slot="scope">
            <el-button @click="$router.push('/specs/'+scope.row.id)" type="primary" circle  icon="el-icon-edit" size="mini"></el-button>
            <el-button @click="del(scope.row.id)" type="danger" circle icon="el-icon-delete" size="mini"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import { getSpecsList } from '../../request/specs';
export default {
    data(){
        return {
            // 规格列表
            list:[],
            page:1,
            size:1
        }
    },
    methods:{
        // 获取规格列表
        async getSpecsList(){
            const list=await getSpecsList({page:this.page,size:this.size});
            if(list){
                this.list=list;
            }
        },
        del(id){
          // console.log(id);
          this.$myConfirm(async ()=>{
            // 1-请求数据接口, 删除服务端的数据
            const res=await this.$http.post('/api/specsdelete',{id});
            if(res.code==200){
              this.$success('删除成功');
            }else{
              this.$error('删除失败')
            }
            // 2-更新视图
            const index=this.list.findIndex(item=>item.id==id);
            this.list.splice(index,1);
          });
        }
    },
    created(){
        this.getSpecsList();
    }
}
</script>

<style scoped>
.el-tag{
    margin:0 2px;
}
</style>